<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>微服务-Systemt1st</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-top: 50px;
        }

        form {
            text-align: center;
            margin-bottom: 50px;
        }

        select {
            width: 200px;
            height: 30px;
            border: none;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0, 0, 0, .1);
            padding: 5px;
        }

        #forecast-container {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 10px;
            justify-items: center;
            margin: 20px;

        }

        .card {
            min-width: 150px;
            max-width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, .1);
            vertical-align: top;
            background-color: white;
        }

        .card img {
            width: 64px;
            height: 64px;
            margin-right: 10px;
        }

        .card p {
            margin: 0;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<h1>微服务项目-天气查询-Systemt1st</h1>
<form>
    <select id="cityid" name="cityid" onchange="updateday()">
        <option value="" disabled selected>请选择城市</option>
        <option th:each="city:${citys}" th:value="${city.code}" th:label="${city.name}"/>
    </select>
    <h2 th:each="city : ${citys}" th:if="${city.code} == ${cityid}" th:text="|当前城市为 ${city.name}|"></h2>
</form>

<div id="forecast-container">
    <div th:each="day : ${response.result.list}" class="card">
        <img th:src="@{|/image/${day.weatherimg}|}" alt="天气图标">
        <p th:text="${day.date}">日期</p>
        <p th:text="${day.week}">星期</p>
        <p th:text="${day.weather}">天气</p>
        <p th:text="${day.real} ">温度</p>
        <p th:text="${'最低温度: ' + day.lowest}"></p>
        <p th:text="${'最高温度: ' + day.highest}"></p>
        <p th:text="${'风向: ' + day.wind}"></p>
        <p th:text="${'风速: ' + day.windspeed + ' ' + day.windsc}"></p>
        <p th:text="${'日出时间: ' + day.sunrise}"></p>
        <p th:text="${'日落时间: ' + day.sunset}"></p>
        <p th:text="${'月出时间: ' + day.moonrise}"></p>
        <p th:text="${'降水量: ' + day.pcpn}"></p>
        <p th:text="${'紫外线指数: ' + day.uv_index}"></p>
        <p th:text="${'能见度: ' + day.vis}"></p>
        <p th:text="${'湿度: ' + day.humidity}"></p>
        <p th:text="${day.tips}"></p>
    </div>
</div>

<script>
    function updateday() {
        var cityid = $("#cityid").val();
        $.ajax({
            url: "/weather/search",
            data: {cityid: cityid},
            success: function(response) {
                // 清空原有的天气信息
                document.open();
                document.write(response);
                document.close();
            }
        });
    }
</script>


</body>
</html>